headless UIのTabs

code:tsx

function MyTabs() {

return (

<Tab.Group>

<Tab.List>

<Tab>Tab 1</Tab>

<Tab>Tab 2</Tab>

<Tab>Tab 3</Tab>

</Tab.List>

<Tab.Panels>

<Tab.Panel>Content 1</Tab.Panel>

<Tab.Panel>Content 2</Tab.Panel>

<Tab.Panel>Content 3</Tab.Panel>

</Tab.Panels>

</Tab.Group>

)

}

Tab.Group

デフォルトでは矢印キーで移動したらタブが自動で開くが、

manualを付けると、矢印キーで選択した後にエンターやスペースで開く

vertcal

上下の矢印キーで移動

defaultIndex

デフォルトページを指定

onChange

code:tsx

<Tab className="ui-selected:bg-blue-500 ui-selected:text-white ui-not-selected:bg-white ui-not-selected:text-black">

Tab 1

</Tab>